<template>
  <a-card title="数据概览">
    <a-row class="margin-bottom-md">
        <a-col :span="6">
            <a-statistic title="咖啡品类数" :value="data.coffee"/>
        </a-col>
         <a-col :span="6">
            <a-statistic title="分类数" :value="data.category"/>
        </a-col>
         <a-col :span="6">
            <a-statistic title="点赞数" :value="data.likes"/>
        </a-col>
        <a-col :span="6">
            <a-statistic title="访问数" :value="data.views  "/>
        </a-col>
    </a-row>
  </a-card>
</template>

<script setup lang="ts">
import { getStatisticsData } from '@/server/modules/home';
import { onMounted, ref } from 'vue';
type StatisticType = {coffee:number,category:number,likes:number,views:number}

const data = ref<StatisticType>({
    coffee: 0,
    category: 0,
    likes: 0,
    views: 0
})
const getStatistics = async()=>{ 
    const res = await getStatisticsData()
    data.value = res.data
}
onMounted(()=>{ 
    getStatistics()
})
</script>

<style scoped>
.top-list{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    flex: 1;
    width: 100%;
}
.top-list-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 50%;
    padding: 4px 16px;
    border-radius: 4px;
}
.top-list-item:hover{
    background-color: #fafafa;
    transition: var(--transition);
}
.top-list-item-num {
    color: var(--text-secondary);
    margin-right: 8px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-color: #fafafa;
    justify-content: center;
}
</style>